<template>
	<view>
		<view class="search-bar">
			<u-search :show-action="false" placeholder="搜索品牌/车型/指导价" bg-color="#fff" v-model="searchkey" @search="search"></u-search>
		</view>
		<view class="choose-group">
			<view :class="item.checked==true?'li active':'li'" v-for="(item,index) in dataList" :key="index" @tap="ChooseSelector(item.name,index)">
				<view class="name">
					{{item.name}}
				</view>
				<view class="icon">
					<image :src="item.checked==true?item.activeIcon:item.normalIcon" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 配置 -->
			<view class="poup" v-if="peiShow" @click="closePoup">
				<view class="main configure-main">
					<view class="year">
						<swiper class="swiper-year" display-multiple-items="1">
							<swiper-item class="li car-swiper-item" @click.stop="changeYear('01','全部')">
								<view :class="allYear==true?'active con':'con'">
									全部
								</view>
							</swiper-item>
							<swiper-item class="li car-swiper-item" v-for="(item,index) in carDateList" :key="index" @click.stop="changeYear(index,item.date)">
								<view :class="item.active==true?'active con':'con'">
									{{item.date}}
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="ul">
						<view class="list" v-for="(item,carindex) in CarList" :key="carindex">
							<view :class="li.active==true?'samll-list active':'samll-list'" v-for="(li,index) in item.list" :key="index"
							 @click.stop="choosePei(carindex,index,li.id)">
								<view class="name">{{li.name}}</view>
								<view class="price">{{li.factoryprice}}</view>
							</view>
						</view>
					</view>
					<view class="sbu-btn">
						<image :src="Core.globalImgUrlBussiness+'/newpage/R_VehicleSourceList/qiongking@2x.png'" mode="aspectFit"
						 @click.stop="choosePeiSub(0)"></image>
						<image :src="Core.globalImgUrlBussiness+'/newpage/R_VehicleSourceList/queding@2x.png'" mode="aspectFit"
						 @click.stop="choosePeiSub(1)"></image>
					</view>
				</view>
			</view>

			<!-- 外观内饰 -->
			<view class="poup" v-if="seShow" @click="closePoup">
				<view class="main color-main">
					<view class="color">
						<view class="list" @click.stop="chooseColor('色全')">
							<view class="color-box">
								<view class="color-box-small color-box-small-all"></view>
							</view>
							<view class="name">
								色全
							</view>
						</view>
						<view class="list" v-for="(item,index) in colorList" :key="index" @click.stop="chooseColor(item.outsideColor)">
							<view class="color-box">
								<view class="color-box-small" :style="{background:item.outsideColorCoding}"></view>
							</view>
							<view class="name">
								{{item.outsideColor}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 地区 -->
			<view class="poup" v-if="zoneShow" @click="closePoup">
				<view class="main zone-main">
					<!-- 左侧地区列表 -->
					<view class="city-list">
						<view class="list">不限</view>
						<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
							<view class="list" v-for="(item,index) in cityList" :key="index" :id="item.letter">
								<view class="letter">
									{{item.letter}}
								</view>
								<view class="name" v-for="(res,index) in item.data" :key="index" @click.stop="chooseCity(res.sname)">
									{{res.sname}}
								</view>

							</view>
						</scroll-view>
					</view>
					<!-- 右侧固定楼层 -->
					<view class="floor">
						<view :data-id="item" v-for="(item, i) in liststr" :key="i" @click.stop="bindToView">{{item}}</view>
					</view>
				</view>
			</view>

			<!-- 筛选 -->
			<view class="poup" v-if="chooseShow" @click="closePoup">  
				<view class="main screen-main">
					<view class="title">商家类型</view>
					<view class="ul">
						<view :class="item.checked==true?'active list':'list'" v-for="(item,index) in typeList" :key="index" @click.stop="changeChooseClass(0,index)">{{item.name}}</view>
					</view>
					<view class="ul">
						<view :class="item.checked==true?'active list':'list'" v-for="(item,index) in paiList" :key="index" @click.stop="changeChooseClass(1,index)">{{item.name}}</view>
					</view>
					<view class="sbu-btn">
						<image :src="Core.globalImgUrlBussiness+'/newpage/R_VehicleSourceList/qiongking@2x.png'" mode="aspectFit"
						 @click.stop="chooseSub(0)"></image>
						<image :src="Core.globalImgUrlBussiness+'/newpage/R_VehicleSourceList/queding@2x.png'" mode="aspectFit"
						 @click.stop="chooseSub(1)"></image>
					</view>
				</view>
			</view>

		</view>

		<!-- 列表 -->
		<view class="car-list">
			<view class="li" v-for="(item,index) in busCarList" :key="index" @click="goDetail(item.goodsid)">
				<view class="good-img">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title">
						{{item.cartypename}}{{item.carname}}
					</view>
					<view class="price">¥{{item.goodminprice}}</view>
					<view class="zhidao-price">指导价：{{item.factoryprice }}/{{item.price.substring(0,1)=='-'? '下':'上'}} {{item.price}}
					</view>
					<view class="see-num">{{item.views}}次浏览</view>
				</view>
			</view>
		</view>
		<!-- 默认图片 -->
		<defaultImg v-if="showimg"></defaultImg>
	</view>
</template>
<script src="./VehicleSourceList.js"></script>
<style lang="scss" scoped>
	@import './VehicleSourceList.scss';
</style>